<template>
  <div class="goods-detail">
    <!-- 标题栏 -->
    <nav-bar title="商品信息"></nav-bar>
    <div style="flex: 1; overflow: auto; width: 100%">
      <!-- banner -->
      <van-swipe class="my-swipe"
                 :autoplay="3000"
                 indicator-color="white">
        <van-swipe-item v-for="item in 3"
                        :key="item">
          <!-- <img class="my-swipe-img"
               :src="item"
               alt="" /> -->
          {{item}}
        </van-swipe-item>
      </van-swipe>
      <div class="good-content">
        <div class="good-info">
          <li class="good-price">58</li>
          <li class="good-title text-overflow_2-xzh">商品名称商品名称最多显示两行，多出的，多出的，多出的</li>
        </div>
        <!-- 商品规格 -->
        <div class="good-specifications">
          <li class="spec-item">
            <span>规格</span>
            <span @click="goodSkuShow = true"
                  v-if="goodCount == 0">
              请选择规格数量
            </span>
            <span @click="goodSkuShow = true"
                  v-else>
              {{ selectSkuData[goodInfo.attr1] }} {{ selectSkuData[goodInfo.attr2] }} {{
              goodCount }}件
            </span>
            <van-icon class="spec-icon"
                      name="arrow"></van-icon>
          </li>
          <li class="spec-item">
            <span>参数</span>
            <span>品牌、主材含量、质地</span>
            <van-icon class="spec-icon"
                      name="arrow"></van-icon>
          </li>
          <li class="spec-item">
            <span>快递</span>
            <span>包邮</span>
          </li>
          <li class="spec-item">
            <span>保障</span>
            <span>7天无理由退货</span>
            <van-icon class="spec-icon"
                      name="arrow"></van-icon>
          </li>
        </div>
        <div class="good-evaluate">
          <div class="good-evaluate-top">
            <span>用户评价（999）</span>
            <li @click="$router.push({path: '/goodsComments'})">
              <span>查看全部</span>
              <van-icon name="arrow"></van-icon>
            </li>
          </div>
          <user-comments></user-comments>
        </div>
        <div class="good-shop">
          <user-head name="美的旗舰店"
                     description="999人关注"
                     shapeType="square"></user-head>
          <li @click="$router.push({path: '/shopHome'})">进入店铺</li>
        </div>
      </div>
      <!-- 商品详情 -->
      <div class="good-detail">
        <van-divider :style="{ color: '#8f8c8c', borderColor: '#8f8c8c', padding: '0 2.5rem' }">
          商品详情
        </van-divider>
        <li class="detail-img"
            v-if="goodInfo.info"
            v-html="goodInfo.info"></li>
        <li class="detail-none"
            v-else>暂无商品介绍</li>
      </div>
    </div>
    <!-- 换购按钮 -->
    <div class="good-footer">
      <van-goods-action>
        <van-goods-action-icon icon="shop-o"
                               text="店铺"
                               style="margin-left:0.3rem"
                               @click="$router.push({path: '/shopHome'})"
                               color="#ee0a24" />
        <van-goods-action-icon icon="like-o"
                               @click="isCollect = !isCollect"
                               :text="isCollect ? '已收藏' : '收藏'"
                               :color="isCollect ? '#ff5000' : '#666666'" />
        <van-goods-action-button type="warning"
                                 @click="cartAdd"
                                 text="加入购物车" />
        <van-goods-action-button type="danger"
                                 @click="goOrderConfirm"
                                 text="立即购买" />
      </van-goods-action>
    </div>
    <!-- 商品规格弹窗 -->
    <van-popup class="good-sku"
               v-model="goodSkuShow"
               closeable
               close-icon="close"
               position="bottom">
      <!-- 商品缩略图 -->
      <div class="sku-title">
        <img :src="require('@/assets/image/default_img.png')"
             alt="" />
        <li class="title-info">
          <span>¥{{ goodInfo.price }}</span>
          <span>库存{{ goodSkuNum }}件</span>
          <span v-if="goodInfo.has_attr == 0"></span>
          <span v-else-if="notSelectAttr.length > 0">
            请选择 {{ notSelectAttr.join(' ') }}
          </span>
          <span v-else>
            已选择 {{ selectSkuData[goodInfo.attr1] }} &nbsp; {{
              selectSkuData[goodInfo.attr2] }}
          </span>
        </li>
      </div>
      <van-divider :style="{borderColor: '#C9C9C9'}"></van-divider>
      <!-- 规格选项 -->
      <div style="flex: 1; overflow: auto">
        <div class="sku-option"
             v-if="goodInfo.has_attr == 1">
          <li class="opt-title">{{ goodInfo.attr1 }}</li>
          <div class="opt-item">
            <span v-for="item in goodInfo.attr1_bute"
                  :key="item"
                  @click="selectPick(goodInfo.attr1 ,item ,'attr1')"
                  :class="{'opt-item-active': item == selectSkuData[goodInfo.attr1]}">
              {{ item }}
            </span>
          </div>
          <van-divider :style="{borderColor: '#C9C9C9'}"></van-divider>
        </div>
        <div class="sku-option"
             v-if="goodInfo.attr2">
          <li class="opt-title">{{ goodInfo.attr2 }}</li>
          <div class="opt-item">
            <span v-for="item in goodInfo.attr2_bute"
                  :key="item"
                  @click="selectPick(goodInfo.attr2 ,item ,'attr2')"
                  :class="{'opt-item-active': item == selectSkuData[goodInfo.attr2]}">
              {{ item }}
            </span>
          </div>
          <van-divider :style="{borderColor: '#C9C9C9'}"></van-divider>
        </div>
        <!-- 换购数量 -->
        <div class="sku-num">
          <span>购买数量</span>
          <van-stepper v-model="goodCount"
                       integer
                       :max="goodSkuNum"
                       button-size="22"></van-stepper>
        </div>
      </div>
      <!-- 确定按钮 -->
      <li class="sku-sure"
          @click="goOrderConfirm">确定</li>
    </van-popup>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar'
import UserHead from '@/components/UserHead'
import UserComments from '@/components/UserComments'
export default {
  data () {
    return {
      loadingColor: '#c0c0c0',
      loadingShow: true,
      goodId: '', // 商品id
      goodSkuShow: false, // 商品规格弹窗
      goodInfo: {
        "name": "齐国雄风姜酒23%vol",
        "vcr": "",
        "price": "13800.00",
        "info": "<p>23%vol齐国雄风姜酒（6支装）</p><p><img src=\"http://kpmall.oss-cn-hangzhou.aliyuncs.com/uploads/image/999/0/2020/12/1607085733321.7KwXv2absw.png\"></p>",
        "thumbs": [
          "http://kpmall.oss-cn-hangzhou.aliyuncs.com/uploads/image/999/0/2020/12/1607085679253.xguqZzorum.png"
        ],
        "has_attr": 1,
        "attr1": "23度",
        "attr2": "容量",
        "attr_info": {
          "6支装": {
            "大": "10",
            "小": "10"
          },
          "3支装": {
            "大": "10",
            "小": "10"
          }
        },
        "attr1_bute": [
          "6支装",
          "3支装"
        ],
        "attr2_bute": [
          "大",
          "小"
        ]
      }, // 商品信息
      goodSkuNum: 0,
      goodCount: 0, // 购买商品数量
      selectSkuData: {}, // 选中商品
      notSelectAttr: [], // 未选择的商品规格
      isCollect: false,
    };
  },
  components: {
    NavBar,
    UserHead,
    UserComments
  },
  watch: {
    selectSkuData: {
      handler (val, oldval) {
        // 查询库存和规格
        if (val[this.goodInfo.attr1] && !this.goodInfo.attr2) {
          this.goodSkuNum = this.goodInfo.attr_info[val[this.goodInfo.attr1]]
          this.notSelectAttr = []
        }
        if (val[this.goodInfo.attr2] && val[this.goodInfo.attr1]) {
          this.goodSkuNum = this.goodInfo.attr_info[val[this.goodInfo.attr1]][
            val[this.goodInfo.attr2]
          ]
          this.notSelectAttr = this.notSelectAttr.filter(s => {
            return s && s.trim()
          })
        }
        if (
          this.goodInfo.attr2 != 0 &&
          (!val[this.goodInfo.attr2] || !val[this.goodInfo.attr1])
        ) {
          this.goodSkuNum = 0
        }
      },
      immediate: true,
      deep: true,
    },
  },
  created () {
    this.getGoodInfo()
    this.$loading.show()
    setTimeout(() => {
      this.$loading.hide()
    }, 1500);
  },
  mounted () {
  },
  methods: {
    /**
     * @description: 获取商品信息
     */
    getGoodInfo () {
    },
    /**
     * @description: 选中商品规格
     * @param {*} attr
     * @param {*} item
     * @param {*} type
     */
    selectPick (attr, item, type) {
      if (this.selectSkuData[attr] != item) {
        this.$set(this.selectSkuData, attr, item)
        type == 'attr1'
          ? (this.notSelectAttr[0] = '')
          : (this.notSelectAttr[1] = '')
      } else {
        this.$delete(this.selectSkuData, attr)
        type == 'attr1'
          ? (this.notSelectAttr[0] = attr)
          : (this.notSelectAttr[1] = attr)
      }
    },
    /**
     * @description: 立即换购
     */
    goOrderConfirm () {
      if (
        this.goodCount == 0 ||
        (this.goodInfo.has_attr == 1 && this.notSelectAttr.length != 0)
      ) {
        this.goodSkuShow = true
        return
      }
      if (this.goodSkuNum == 0) {
        this.$toast('商品库存不足，请重新选择')
        return
      }
      let goodObj = {
        attr: this.selectSkuData,
        skuNum: this.goodSkuNum,
        count: this.goodCount,
        id: this.goodId,
        name: this.goodInfo.name,
        price: this.goodInfo.price,
      }
      this.$router.push({ path: '/orderConfirm' })
    },
    cartAdd () {
      this.$store.commit('cartAdd')
      this.$toast('已加入购物车')
    }
  }
}

</script>
<style lang='scss'>
.goods-detail {
  @extend %wh100;
  @include flex-column;
  align-items: center;
  background-color: #eeeeee;
  overflow: hidden;
  box-sizing: border-box;
  .my-swipe {
    width: 100%;
    height: 7rem;
    .my-swipe-img {
      width: 100%;
      height: 100%;
    }
  }
  .good-content {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    padding: 0.1rem;
    > div {
      background-color: #fff;
      border-radius: 0.1rem;
      width: 100%;
      box-sizing: border-box;
      padding: 0.1rem 0.28rem;
      margin-bottom: 0.1rem;
    }
    .good-info {
      .van-icon {
        color: #535353;
      }
      .good-price {
        font-size: 0.32rem;
        color: #ef3131;
        line-height: 0.36rem;
        margin-top: 0.2rem;
      }
      .good-title {
        width: 100%;
        font-size: 0.3rem;
        color: #131415;
        line-height: 0.48rem;
      }
    }
    .good-specifications {
      height: 2.6rem;
      @include flex-column;
      position: relative;
      .spec-item {
        flex: 1;
        display: flex;
        align-items: center;
      }
      .spec-item > span:first-child {
        width: 0.8rem;
        font-size: 0.26rem;
        color: #a7a7a7;
      }
      .spec-item > span:nth-child(2) {
        flex: 1;
        font-size: 0.26rem;
        color: #131415;
      }
      .spec-icon {
        position: absolute;
        right: 0.6rem;
        font-size: 0.3rem;
      }
    }
    .good-evaluate {
      height: 2.8rem;
      @include flex-column;
      justify-content: space-around;
      .good-evaluate-top {
        width: 100%;
        display: flex;
        justify-content: space-between;
        > span {
          font-size: 0.32rem;
          font-weight: 600;
          color: #131313;
        }
        > li {
          color: #e85014;
          display: flex;
          align-items: center;
          span {
            margin-right: 0.25rem;
          }
        }
      }
      .good-evaluate-bottom {
        line-height: 0.5rem;
      }
    }
    .good-shop {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.3rem 0.3rem 0.3rem 0.55rem;
      > li {
        width: 1.45rem;
        height: 0.5rem;
        line-height: 0.5rem;
        text-align: center;
        font-size: 0.26rem;
        color: #e85014;
        border: 1px solid #e85014;
        border-radius: 1rem;
      }
    }
  }

  .good-detail {
    width: 100%;
    margin-top: 0.1rem;
    .van-divider {
      margin: 0 0 0.1rem 0;
    }
    .detail-img,
    .detail-img p,
    .detail-img img {
      width: 100%;
      height: auto;
      display: block;
    }
    .detail-none {
      width: 100%;
      height: 2rem;
      display: flex;
      justify-content: center;
      color: #c0c0c0;
      font-size: 0.32rem;
    }
  }
  .good-footer {
    width: 100%;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    .van-goods-action {
      height: 1rem;
    }
    .van-goods-action-button--warning {
      height: 100%;
      border-radius: 0;
      background: #333333;
      margin-left: 1rem;
    }
    .van-goods-action-button--danger {
      height: 100%;
      border-radius: 0;
      background: linear-gradient(to right, #e43522, #f76b24);
      margin-right: 0;
    }
  }
}

/* 商品规格弹窗START */
.good-sku {
  width: 100%;
  min-height: 5rem;
  max-height: 10rem;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0.2rem;
  overflow: hidden;
}
.good-sku .van-divider {
  margin-bottom: 0.1rem;
}
.sku-title {
  width: 100%;
  height: 2rem;
  display: flex;
  align-items: center;
}
.sku-title > img {
  width: 2rem;
  height: 2rem;
}
.title-info {
  height: 100%;
  flex: 1;
  margin-left: 0.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.title-info > span:first-child {
  font-size: 0.36rem;
  color: #ef3131;
  margin-top: 0.3rem;
}
.title-info > span:nth-child(2) {
  font-size: 0.26rem;
  color: #969696;
}
.title-info > span:last-child {
  font-size: 0.26rem;
  color: #131415;
}
.sku-option {
  width: 100%;
  font-size: 0.26rem;
}
.sku-option .van-divider {
  margin-top: 0.1rem;
}
.opt-title {
  width: 100%;
  color: #131415;
}
.opt-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.1rem;
}
.opt-item > span {
  margin: 0.1rem;
  width: 1.5rem;
  height: 0.5rem;
  line-height: 0.5rem;
  text-align: center;
  color: #969696;
  background: #eeeeee;
  border-radius: 0.1rem;
}
.opt-item-active {
  background: #fc5252 !important;
  color: #fff !important;
}
.sku-num {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.26rem;
  color: #131415;
}
.sku-sure {
  width: 100%;
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: center;
  font-size: 0.3rem;
  color: #fcf8f8;
  background: #fc5252;
  border-radius: 1rem;
  margin: 0.76rem 0;
}
/* 商品规格弹窗END */
</style>